<template>
    <div class="app-container">
      <!-- <Form
        v-if="showSearch"
        v-model:searchInfo="searchInfo"
        :formItems="formItems"
      >
        <template #footer>
          <div style="text-align: left">
            <el-button size="small" icon="Search" type="primary" @click="goSearch"
              >搜索</el-button
            >
            <el-button size="small" icon="Refresh" @click="resetSearch"
              >重置</el-button
            >
          </div>
        </template>
      </Form> -->
      <h3>
        <el-button size="small" icon="Plus" type="primary" @click="add"
          >添加</el-button
        >
      </h3>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5"> </el-col>
        <right-toolbar
          v-model:showSearch="showSearch"
          @queryTable="resetSearch"
        ></right-toolbar>
      </el-row>
      <h3></h3>
      <x-table
        :propList="propList"
        :tableData="info.items"
        :isLoading="isLoading"
      >
        <template #path="{ row }">
          <span v-if="row.type == 2">{{ row.link }}</span>
          <span v-else>{{ row.path }}</span>
        </template>
        <template #status_text="{ row }">
          <el-tag type="success" v-if="row.status == 1">启用</el-tag>
          <el-tag type="danger" v-else>禁用</el-tag>
        </template>
        <template #type="{ row }">
          <el-tag type="success" v-if="row.type == 1">项目地址</el-tag>
          <el-tag v-else>外链</el-tag>
        </template>
        <template #icon="{ row }">
          <i
            :class="['iconfont', row.icon]"
            :style="{ color: row.icon_color }"
          ></i>
        </template>
  
        <template #op="{ row }">
          <el-button type="primary" link icon="Edit" @click="change(row)"
            >编辑</el-button
          >
          <el-button type="primary" link icon="Delete" @click="del(row)"
            >删除</el-button
          >
        </template>
      </x-table>
      <pagination
        v-show="info.total > 0"
        :total="info.total"
        v-model:page="searchInfo.pageNum"
        v-model:limit="searchInfo.pageSize"
        @pagination="getInfo"
      />
      <Dialog
        width="50%"
        :title="dialogConfig.formConfig.title"
        v-model:isShowDialog="isShowDialog"
        @confirm="submit"
      >
        <Form ref="formRef" v-bind="dialogConfig.formConfig">
          <template #icon_color>
            <!-- {{ dialogConfig.formConfig.formData.icon_color }} -->
            <el-color-picker
              v-model="dialogConfig.formConfig.formData.icon_color"
            />
            <span style="margin-left: 15px; color: #f00"
              >公众号颜色示例：#1aad19</span
            >
          </template>
          <template #icon>
            <div class="">
              <div style="display: flex; text-align: left">
                当前选择：<i
                  v-if="curIconIndex !== null"
                  :class="['iconfont', iconList[curIconIndex].icon]"
                  :style="{ color: dialogConfig.formConfig.formData.icon_color }"
                ></i>
              </div>
              <div class="icon_wrap">
                <div
                  v-for="(item, index) in iconList"
                  class="icon_item"
                  :class="[curIconIndex == index ? 'active' : '']"
                  :key="item.icon"
                  @click="onIcon(item, index)"
                >
                  <i class="iconfont" :class="[item.icon]"></i>
                  <span>{{ item.icon }}</span>
                </div>
              </div>
            </div>
          </template>
        </Form>
      </Dialog>
    </div>
  </template>
  
  <script>
  import { propList, formItems, dialogConfig, linkTypeChange } from "./config";
  import { getList, add, change, del, getPageSet } from "@/api/platform/pageSet";
  import { iconList } from "./config/data.js";
  export default {
    name: "platformpageSetindex",
    data() {
      return {
        iconList: iconList,
        dialogConfig,
        curItem: {},
        showSearch: true,
        isShowDialog: false,
        isLoading: false,
        propList,
        formItems,
        info: {},
        searchInfo: {
          pageNum: 1,
          pageSize: 10,
          created_at: [],
        },
        curIconIndex: null,
      };
    },
    computed: {},
    created() {
      this.init();
    },
    mounted() {},
    methods: {
      init() {
        this.getInfo();
        this.getPageSet();
      },
      async getPageSet() {
        const { data } = await getPageSet();
        this.dialogConfig.formConfig.formItems.forEach((item) => {
          if (item.prop == "path") {
            item.options = data;
          }
        });
      },
      onIcon(item, index) {
        this.curIconIndex = index;
      },
      async getInfo() {
        this.isLoading = true;
        const params = { ...this.searchInfo };
        const { data } = await getList(params);
        this.info = data;
        this.isLoading = false;
      },
      submit() {
        this.$refs.formRef.validate(async (valid) => {
          if (valid) {
            console.log(this.dialogConfig.formConfig.formData);
            let icon = "";
            if (this.curIconIndex === null) {
              // this.$message.error("请选择图标");
              // return false;
              icon = "";
            } else {
              icon = this.iconList[this.curIconIndex].icon;
            }
  
            //   this.dialogLoading = true;
            const params = this.dialogConfig.formConfig.formData;
            params["icon"] = icon;
            if (params.id) {
              await change(params);
            } else {
              await add(params);
            }
            this.getInfo();
            this.$message.success("操作成功");
            this.isShowDialog = false;
          }
        });
      },
      resetSearch() {
        this.searchInfo = this.$options.data.call(this).searchInfo;
        //   this.searchInfo.created_at = this.getTimeFilterDefault(true);
        this.getInfo();
      },
      goSearch() {
        // 重置时间
        this.getInfo();
      },
      add() {
        // 添加
        this.dialogConfig.formConfig.formData = {};
        this.isShowDialog = true;
      },
      change(item) {
        // 修改
        this.curIconIndex = null;
        this.dialogConfig.formConfig.formData = { ...item };
        // 反显图标
        // item.icon;
        this.iconList.forEach((item2, index) => {
          if (item2.icon == item.icon) {
            this.curIconIndex = index;
          }
        });
        linkTypeChange(item.type, this.dialogConfig.formConfig.formItems);
        this.isShowDialog = true;
      },
      del(item) {
        // 删除
        this.$modal
          .confirm("是否确认删除？")
          .then(function () {
            return del(item.id);
          })
          .then(() => {
            this.getInfo();
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      },
    },
  };
  </script>
  
  <style scoped lang="scss">
  .icon_wrap {
    display: flex;
    flex-wrap: wrap;
    height: 300px;
    overflow: scroll;
    margin-top: 15px;
    .icon_item {
      width: 130px;
      height: 60px;
      display: flex;
      flex-direction: column;
      align-items: center;
      border: 1px solid #eaeefb;
      /* padding: 10px; */
      /* padding-top: 0; */
      border-radius: 5px;
      margin-right: 5px;
      margin-bottom: 5px;
      &.active {
        background: #f00;
        color: #fff;
      }
      span {
        line-height: 14px;
        font-size: 14px;
      }
    }
  }
  </style>
  